<!--
 * @Autor: lh
 * @Date: 2023-10-12 08:50:42
 * @LastEditors: lh
 * @LastEditTime: 2023-10-17 10:01:32
 * @Description: 
-->
<script setup lang="ts">
import { ref, reactive, onMounted } from "vue"
import docxbox from "@/components/docx/index.vue"
import execlbox from "@/components/execl/index.vue"
import pdfbox from "@/components/pdf/index.vue"
import { Download } from "@element-plus/icons-vue"
import { AlinkDownLoadFile } from "@/utils/index"

let tabFil = localStorage.getItem("tabFil") // 文件对象
let tabFilname = localStorage.getItem("tabFilname") // 文件地址 字段
let filename = localStorage.getItem("tabFilname_name") // 文件名 字段

let objRef = ref<any>({})
let type = ref("") // 当前文件类型
let fileUrl = ref("") // 文件地址

let imghz = [".jpg", ".jpeg", ".png", ".gif", ".webp"]

//#region  tab
let activeName = ref(-1) // 当前tab
let tabList = ref([]) // 当前文件列表
// 切换tab
let tabChangeFn = () => {}
//#endregion

//#region  本地下载
/** 本地下载弹框 */
const handleDowcvg = () => {
  dialogVisible.value = true
}

let dialogVisible = ref(false) // 弹框
// 关闭
const handleClose = (done: () => void) => {
  dialogVisible.value = false
}

const checkAll = ref(false) //全选
const checkedCities = ref([]) // 选中的

// 选中监听
const handleCheckedCitiesChange = (value: string[]) => {
  const checkedCount = value.length
  checkAll.value = checkedCount === tabList.value.length
}
const downloadFileFn = () => {
  // 下载文件
  console.log(checkedCities.value)
  for (let i = 0; i < tabList.value.length; i++) {
    let it = tabList.value[i]
    if (checkedCities.value.includes(it.fileUrl)) {
      AlinkDownLoadFile(it.fileUrl, it.name)
    }
  }

  dialogVisible.value = false
}

//#endregion

onMounted(() => {
  if (tabFil) {
    objRef.value = JSON.parse(tabFil)
    console.log(objRef.value, tabFilname, filename, "--onMounted")

    let urlfile = objRef.value[tabFilname] ? objRef.value[tabFilname].split(",") : []
    let nameFiles = filename.split(",")
    for (let i = 0; i < urlfile.length; i++) {
      tabList.value.push({
        fileUrl: urlfile[i],
        name: nameFiles[i],
        type: urlfile[i].substring(urlfile[i].lastIndexOf("."))
      })
    }
    activeName.value = 0
    // fileUrl.value = objRef.value[tabFilname]

    // type.value = fileUrl.value.substring(fileUrl.value.lastIndexOf("."))// 获取文件后缀
  }
})
</script>
<template>
  <div class="filbox">
    <el-dialog v-model="dialogVisible" title="请选择下载文件" width="30%" :before-close="handleClose">
      <div>
        <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
          <el-checkbox v-for="(it, i) in tabList" :key="i" :label="it.fileUrl">{{ it.name }}</el-checkbox>
        </el-checkbox-group>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="downloadFileFn"> 下载 </el-button>
        </span>
      </template>
    </el-dialog>
    <div class="boxfile">
      <el-tooltip content="下载附件">
        <el-button type="primary" @click="handleDowcvg" :icon="Download" circle style="margin-bottom: 10px" />
      </el-tooltip>
      <el-tabs v-model="activeName" class="demo-tabs" type="card" @tab-change="tabChangeFn">
        <el-tab-pane
          v-for="(it, i) in tabList"
          :key="i"
          :label="it.name || it.fileUrl"
          :name="i"
          class="boxs"
        ></el-tab-pane>
      </el-tabs>
    </div>
    <template v-if="activeName !== -1">
      <template v-if="tabList[activeName].type == '.docx'">
        <docxbox class="boxs" :file="tabList[activeName].fileUrl"></docxbox>
      </template>
      <template v-else-if="tabList[activeName].type == '.xlsx'">
        <execlbox class="boxs" :file="tabList[activeName].fileUrl"></execlbox>
      </template>
      <template v-else-if="tabList[activeName].type == '.pdf'">
        <pdfbox class="boxs" :file="tabList[activeName].fileUrl"></pdfbox>
      </template>
      <template v-else-if="imghz.includes(tabList[activeName].type)">
        <img :src="tabList[activeName].fileUrl" />
      </template>
    </template>
  </div>
</template>
<style scoped>
.filbox {
  width: 100%;
  height: 100%;
}
.boxs {
  width: 100%;
}
.x-spreadsheet-sheet {
  width: 100% !important;
}
.boxfile {
  box-sizing: border-box;
  height: 100px;
  padding: 10px;
  background: #fff;
}
</style>
